// 2. 有状态组件
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 状态
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Column组件',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        backgroundColor: Colors.purple,
      ),
      // 1. GridView 默认构造函数
      // body: GridView(
      //   gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      //     // 侧轴排布的个数
      //     crossAxisCount: 3,
      //     // 宽高比
      //     childAspectRatio: 4 / 3,
      //     // 侧轴方向的间距
      //     crossAxisSpacing: 10,
      //     // 主轴方向的间距
      //     mainAxisSpacing: 20,
      //   ),
      //   children: [
      //     Container(
      //       color: Colors.green,
      //       alignment: Alignment.center,
      //       child: const Text('黑马程序员1'),
      //     ),
      //     Container(
      //       color: Colors.pink,
      //       alignment: Alignment.center,
      //       child: const Text('黑马程序员2'),
      //     ),
      //     Container(
      //       color: Colors.blue,
      //       alignment: Alignment.center,
      //       child: const Text('黑马程序员3'),
      //     ),
      //     Container(
      //       color: Colors.yellow,
      //       alignment: Alignment.center,
      //       child: const Text('黑马程序员4'),
      //     ),
      //     Container(
      //       color: Colors.cyan,
      //       alignment: Alignment.center,
      //       child: const Text('黑马程序员5'),
      //     ),
      //     Container(
      //       color: Colors.green,
      //       alignment: Alignment.center,
      //       child: const Text('黑马程序员6'),
      //     )
      //   ],
      // ),
      // 2. GridView.builder 构造函数
      // body: GridView.builder(
      //   gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      //     crossAxisCount: 3,
      //   ),
      //   itemBuilder: (context, index) {
      //     return Container(
      //       color: Colors.red,
      //       alignment: Alignment.center,
      //       child: Text('传智播客 $index'),
      //     );
      //   },
      //   itemCount: 30,
      // ),
      // 3. GridView.extent 构造函数
      body: GridView.extent(
        // 侧轴最大宽度
        maxCrossAxisExtent: 100,
        // // 宽高比
        // childAspectRatio: 4 / 3,
        // // 侧轴方向的间距
        // crossAxisSpacing: 10,
        // // 主轴方向的间距
        // mainAxisSpacing: 20,
        children: [
          Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text('传智播客1'),
          ),
          Container(
            color: Colors.orange,
            alignment: Alignment.center,
            child: const Text('传智播客2'),
          ),
          Container(
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('传智播客3'),
          ),
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('传智播客4'),
          ),
          Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('传智播客5'),
          ),
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('传智播客6'),
          ),
          // Container(
          //   color: Colors.purple,
          //   alignment: Alignment.center,
          //   child: const Text('传智播客6'),
          // ),
        ],
      ),
    );
  }
}
